<template>
  <!-- 单选错题本 -->
<view class="">
  <view class="" v-if="subject">
    <view class="title">
      当前第{{current+1}}题/共{{total}}道错题
    </view>
    <view class="topic">
      题目：{{subject.title}}
    </view>
    <view class="test" v-for="(item,index) of subject.options" :key="index">
      <text :class="subject.userSelect == item.code ? 'red' : ''">{{item.code}}:{{item.option}}</text>
    </view>
    <view class="choose">
      您的选择是:{{subject.userSelect[0]}}
    </view>
    <view class="btn">
      <button type="primary" @click="pre">
        上一个错题
      </button>
      <button type="primary" @click="next">
        下一个错题
      </button>
    </view>
  
    <view class="rigth">
      参考答案:{{subject.answer[0]}}
    </view>
    <view class="ex">
      答案解析:{{subject.rigth}}
    </view>
  </view>
  <view v-if="!subject" class="abc">
    正在加载错题集...
  </view>
</view>
</template>

<script>
  export default {
    data() {
      return {
        total: 0,
        current: 0,
        errArr: [],
        titles: [],
        currentNum: [],
        subject: []
      }
    },
    methods: {
      pre(){
        if (this.current - 1 < 0) {
          uni.showToast({
            icon: 'error',
            title: '已经是第一个啦'
          })
        } else {
          this.current = this.current-1
          this.subject = this.titles[this.current]
        }
        console.log(this.current);
        console.log(this.subject);
      },
      next() {
        if (this.current + 1 >= this.titles.length) {
          uni.showToast({
            icon: 'error',
            title: '已经是最后一个啦'
          })
        } else {
          this.current = this.current + 1
          this.subject = this.titles[this.current]
        }

      }
    },
    onLoad(options) {
      this.errArr = uni.getStorageSync('only')
      if (this.errArr && this.errArr.length > 0) {
        this.titles = this.errArr
        console.log(this.titles)
      }
      this.subject = this.titles[this.current]
      this.total = this.titles.length
    }
  }
</script>

<style scoped lang="scss">
  .abc{
    margin-top: 25%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .title {
    text-align: center;
    color: #ffcc66;
    font-size: 32rpx;
    margin: 15rpx;
  }

  .red {
    color: red;
  }

  .topic {
    margin: 20rpx;
  }

  .test {
    margin: 20rpx;
  }

  .btn {
    display: flex;
    justify-content: space-between;

    button {
      width: 40%;
      height: 70rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  .ex{
    font-size: 28rpx;
    margin: 20rpx;
  }
  .rigth,.choose{
    margin: 20rpx;
  }
</style>